<template>
  <div class="file-selector">
    <!-- 模仿 el-upload 的文件选择功能和样式 -->
    <div class="el-upload el-upload--text">
      <el-button v-if="!fileInfo"
        type="primary" 
        @click="selectFile"
        class="el-upload__button"
      >
        <el-icon><Upload /></el-icon>
        选择文件
      </el-button>
      <div class="el-upload__tip" v-if="!fileInfo">
        支持上传 mp4 格式文件
      </div>
    </div>

    <div v-if="fileInfo" class="file-info el-upload__file-list">
      <div class="el-upload__file is-success">
        <div class="file-info-content">
          <h3 class="file-info-title">选中的文件信息：</h3>
          <p><span class="info-label">文件名：</span>{{ fileInfo.name }}</p>
          <p><span class="info-label">完整路径：</span><code>{{ fileInfo.path }}</code></p>
          <p><span class="info-label">大小：</span>{{ formatFileSize(fileInfo.size) }}</p>
        </div>
        <el-icon class="el-upload__file-remove" @click="clearFile">
          <Close />
        </el-icon>
      </div>
    </div>

    <el-alert
      v-if="errorMessage"
      :message="errorMessage"
      type="error"
      show-icon
      class="mt-4"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Upload, Close } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { open } from '@tauri-apps/plugin-dialog';
import { stat } from '@tauri-apps/plugin-fs';

const fileInfo = ref(null);
const errorMessage = ref('');

// 选择文件
const selectFile = async () => {
  try {
    fileInfo.value = null;
    errorMessage.value = '';

    // 触发 Tauri 的系统文件对话框
    const selected = await open({
      multiple: false,
      filters: [
        { name: '视频', extensions: ['mp4']},
      ],
      title: '选择视频'
    });

    if (!selected) return;

    const stats = await stat(selected);
    const fileName = stats.name || getFileNameFromPath(selected);
    
    fileInfo.value = {
      name: fileName,
      path: selected,
      size: stats.size,
    };
    
    ElMessage.success('文件选择成功');
  } catch (error) {
    errorMessage.value = `选择文件失败: ${error.message || '未知错误'}`;
  }
};

// 清除选中的文件
const clearFile = () => {
  fileInfo.value = null;
  //ElMessage.info('已清除选中的文件');
};

// 工具函数：从路径提取文件名
const getFileNameFromPath = (path) => {
  if (!path) return '未知文件';
  const separators = ['/', '\\'];
  let separator = '/';
  for (const sep of separators) {
    if (path.includes(sep)) {
      separator = sep;
      break;
    }
  }
  const parts = path.split(separator);
  return parts[parts.length - 1] || '未知文件';
};



// 工具函数：格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

defineExpose({
  fileInfo
})
/* const path_=ref(null);
// 用于触发v-model更新的事件
const emit = defineEmits(['update:modelValue']);
// 当内部值变化时，触发事件更新外部v-model
watch(
  () => fileInfo.value.path,
  (newValue) => {
    emit('update:modelValue', newValue);
    path_.value=newValue
  }
);
defineProps({
    path_:String
} 
)*/

</script>

<style scoped>
.file-selector {
  max-width: 800px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}



.el-upload__file-list {

  padding: 0;
}

.el-upload__file {
  position: relative;
  padding: 12px 16px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.2s;
}

.el-upload__file:hover {
  border-color: #409eff;
}

.el-upload__file-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #f56c6c;
  cursor: pointer;
  transition: color 0.2s;
}

.el-upload__file-remove:hover {
  color: #e4393c;
}

.file-info-content {
  padding-right: 24px; /* 为删除按钮留出空间 */
}

.file-info-title {
  margin-top: 0;
  margin-bottom: 12px;
  color: #1f2329;
  font-size: 14px;
  font-weight: 500;
}

.info-label {
  color: #606266;
  font-weight: 500;
}

.file-info p {
  margin: 8px 0;
  color: #303133;
  font-size: 13px;
  line-height: 1.5;
}

code {
  background-color: #e5e7eb;
  padding: 2px 4px;
  border-radius: 4px;
  word-break: break-all;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
}

/* 调整提示文本样式 */
.el-upload__tip {
  color: #606266;
  font-size: 12px;
  margin-top: 4px;
}
</style>
